<template>
    <div class="p-4">
      <div class="max-w-sm rounded overflow-hidden shadow-lg mb-4 bg-white dark:bg-gray-900">
        <img
          class="w-full"
          src="https://tailwindcss.com/img/card-top.jpg"
          alt="Sunset in the mountains"
        />
        <div class="px-6 py-4 pb-2">
          <div class="font-bold text-xl mb-2 dark:text-white">The Coldest Sunset</div>
          <p class="text-gray-700 dark:text-gray-300">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
            quia, nulla! Maiores et perferendis eaque, exercitationem praesentium
            nihil.
          </p>
        </div>
        <div class="px-6 py-4">
          <span class="badge mr-2">#photography</span>
          <span class="badge mr-2">#travel</span>
          <span class="badge">#winter</span>
        </div>
        <div class="px-6 py-4 dark-mode">
          <span class="badge mr-2">#staysdark</span>
          <span class="badge force-light">#stayslight</span>
        </div>
      </div>
    </div>
  </template>
  
  <style lang="postcss" scoped>
  .badge {
    @apply inline-block bg-gray-200 dark:bg-gray-950 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-400;
    &:hover {
      @apply bg-gray-300;
    }
  }
  
  .dark-mode .force-light {
    @apply bg-gray-200 text-gray-700;
  }
  </style>  